import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Modal} from 'antd'
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        span: 5
    },
    wrapperCol: {
        span: 18
    },
};

const Dialog = ({ item = {}, onCreate, form, ...modalProps}) => {
    const { getFieldDecorator, validateFields, getFieldsValue } = form;
    const handleOk = () => {
        validateFields((errors) => {
            if (errors) {
                return
            }
            const data = getFieldsValue();
            if(!data.pid){
                data.pid = '0';
            }
            onCreate(data)
        })
    };

    const modalOpts = {
        ...modalProps,
        onOk: handleOk
    };

    return (
        <Modal {...modalOpts}>
            <Form layout="horizontal">
                {
                    item.pid &&
                    <FormItem label="PID" hasFeedback {...formItemLayout}>
                        {getFieldDecorator('pid', {
                            initialValue: item.pid,
                        })(<Input disabled/>)}
                    </FormItem>
                }
                <FormItem label="ID" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('id', {
                        initialValue: item.id,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="Name" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('name', {
                        initialValue: item.name,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="Path" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('path', {
                        initialValue: item.path,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="Icon" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('icon', {
                        initialValue: item.icon,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
            </Form>
        </Modal>
    )
};

Dialog.propTypes = {
    form: PropTypes.object.isRequired,
    item: PropTypes.object,
    onOk: PropTypes.func,
};

export default Form.create()(Dialog);